<!DOCTYPE html>
<head>
    <meta charset="UTF-8"/>
    <title>Open-GeoIP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/libs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/style.css">

    <style>
        .red0 {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
<div id="captcha"></div>
<div id="navbar" class="">
    <nav class="navbar navbar-expand-lg navbar-white fixed-top navbar-custom sticky sticky-dark" id="main-menu">
        <div class="container">
            <a class="navbar-brand logo text-uppercase" href="#">
                <h5>Open-GeoIP</h5>
            </a>

            {{ if or (not .nickname) (not .username)  }}
            {{ if .sso.Enabled }}
            {{ if .oauth2.Enabled }}
            <a class="navbar-brand logo text-uppercase" href={{.authCodeURL}}>
                <span>{{ .oauth2.DisplayName }}</span>
            </a>
            {{ end }}
            {{ end }}
            {{ else }}
            <div>
                <span>{{ .nickname }}</span>
                <span>{{ .username }}</span>
                <a class="navbar-brand logo text-uppercase" href="/sso/logout">
                    <span>注销</span>
                </a>
            </div>
            {{ end }}
        </div>
    </nav>
</div>
<section class="section bg-lightan active" id="home">
    <div class="home-overlay"></div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h1 class="home-title mt-3">open-geoip</h1>
                <p class="home-desc text-muted mt-3" id="show-myip"></p>
                <p class="home-desc text-muted mt-3" id="show-mylocation"></p>
                <div class="mt-5 home-form rounded" style="z-index: 10;position: inherit;">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="form-group mb-0">
                                <input class="form-control" id="ip-address" placeholder="IP ADDRESS"
                                       type="text"/>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group home-button">
                                <button id="btnSubmit" class="btn btn-primary w-100">GO!</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="show-info" class="mt-3" style="height: 30px;line-height: 30px"></div>
            </div>
        </div>
    </div>
</section>
<section class="bg-footer bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="mt-4">
                    <h5>ABOUT</h5>
                    <p><strong>Open-GeoIP -</strong> A simple and high-performance IP address geolocation query service.</p>
                    <p class="text-muted mb-0">
                        Copyright &copy;<a href="https://github.com/ECNU/open-geoip">something for copyright</a>
                    </p>
                </div>
            </div>
            <div class="col-lg-6 offset-lg-2">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="mt-4">
                            <h5 class="f-18">RESOURCE</h5>
                            <ul class="list-unstyled footer-link mt-3">
                                <li>
                                    <a href="https://github.com/ECNU/open-geoip">
                                        GITHUB
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="mt-4 ps-0 ps-lg-5">
                            <h5 class="f-18">MORE</h5>
                            <ul class="list-unstyled footer-link mt-3">
                                <li><a href="https://www.maxmind.com">
                                    <pre>GeoLite2 @MaxMind</pre>
                                </a></li>
                                <li><a href="https://www.ipip.net">
                                    <pre>ipip.net</pre>
                                </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
<script src="../assets/libs/jquery-1.12.4/jquery.min.js"></script>
<script>
    // jqeury
    $(function () {
        getMyIp();
        getMyLocation();

        // query ip address function
        function getIp() {
            const ip = $("#ip-address").val();
            $.ajax({
                type: "GET",
                url: "/ip",
                data: {
                    ip: ip
                },
                success: function (res, status) {
                    console.log("search ip success！")
                    console.log(res)
                    $("#show-info").html("<h4>" + res + "</h4>");
                },
                dataType: "text"
            });
        }

        // input lose focus
        $("#ip-address").blur(function () {
            const $parent = $(this).parent();
            $parent.find(".msg").remove();


            // check ip
            if ($(this).is("#ip-address")) {
                // 去除两端空格
                const psdVal = $.trim(this.value);
                // const regIpv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
                const regIpv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
                const regIpv6 = /^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/
                if (psdVal === "" || (!regIpv4.test(psdVal) && !regIpv6.test(psdVal))) {
                    const errorMsg = "Incorrect IP format.";
                    $parent.append("<span class='msg red0'>" + errorMsg + "</span>");
                    // 使得按钮不可点击
                    $("#btnSubmit").attr("disabled", true)
                } else {
                    // 使得按钮可点击
                    $("#btnSubmit").attr("disabled", false)
                }
            }
        }).keyup(function () {
            $(this).triggerHandler("blur");
        }).focus(function () {
            $(this).triggerHandler("blur");
        });

        $("#btnSubmit").click(function () {
            getIp();
            $("#ip-address").trigger("blur");
        });
    });

    // 获取myip的方法
    function getMyIp() {
        $.ajax({
            type: "GET",
            url: "/myip",
            success: function (res, status) {
                $("#show-myip").html("Your IP address: " + '<a href="/myip" class="boldfont">' + res + '</a>')
            },
            dataType: "text"
        });
    }

    // 获取mylocation的方法
    function getMyLocation() {
        $.ajax({
            type: "GET",
            url: "/mylocation",
            success: function (res, status) {
                $("#show-mylocation").html(res)
            },
            dataType: "text"
        });
    }
</script>
<script src="../assets/libs/bootstrap/bootstrap.bundle.min.js"></script>
</body>

</html>